<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-24 16:31:23
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-24 18:09:23
-->
<template>
    <div class="box">
        <div class="row">
            <el-button type="primary" size="mini" @click="dialogVisible = true"
                >创建</el-button
            >
        </div>
        <div style="clear:both"></div>

        <div class="itemList">
            <div class="item" v-for="(item, index) in listData" :key="index">
                <div class="Icon">
                    <i
                        class="el-icon-date
"
                    ></i>
                </div>
                <div class="itemInfo">
                    <div class="title ShengLue">{{ item.semester_name }}</div>
                    <div class="date">
                        {{ item.semester_start }} - {{ item.semester_end }}
                    </div>
                </div>
            </div>
        </div>
        <div v-if="listData.length == 0" class="noMore">
            -- 暂无数据 --
        </div>
        <!-- //分页 -->
        <div class="bottomPagination">
            <el-pagination
                :current-page="currentPage"
                :page-sizes="[10, 30, 50]"
                :page-size="pageSize"
                layout=" sizes, prev, pager, next,total, jumper"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />
        </div>
        <!-- //新增弹窗 -->
        <el-dialog title="创建年度" :visible.sync="dialogVisible" width="30%">
            <el-form
                label-width="80px"
                :model="form"
                :rules="rules"
                ref="ruleForm"
            >
                <el-form-item label="年度名称" prop="semester_name">
                    <el-input
                        v-model="form.semester_name"
                        style="width:220px"
                        placeholder="请输入年度名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="开始日期" prop="semester_start">
                    <el-date-picker
                        v-model="form.semester_start"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" prop="semester_end">
                    <el-date-picker
                        v-model="form.semester_end"
                        type="date"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="周数">
                    <div class="zhou">{{ getPried }}</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add('ruleForm')"
                    >创 建</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { toSaveStuSemester, toGetStuSemester } from "@/api/table/index";
import { getFormatTime } from "@/utils/timeUtils";
export default {
    computed: {
        // 当开始日期和结束日期有值了，则周数就会显示出来
        getPried() {
            if (
                this.form.semester_start == "" ||
                this.form.semester_end == ""
            ) {
                return "请设置开始/结束日期";
            } else {
                let star_date =
                    new Date(this.form.semester_start).getTime() / 1000;
                let end_date =
                    new Date(this.form.semester_end).getTime() / 1000;
                let resulet = end_date - star_date;
                return Math.ceil(parseInt(resulet / 86400) / 7);
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            pageSize: 10,
            currentPage: 1,
            total: 0,
            listData: [],
            form: {
                semester_name: "",
                semester_start: "",
                semester_end: "",
                usr_id: this.$store.getters.userInfo.id
            },
            //验证
            rules: {
                semester_name: [
                    {
                        required: true,
                        message: "请输入年度名称",
                        trigger: "blur"
                    }
                ],
                semester_start: [
                    {
                        required: true,
                        message: "请选择开始日期",
                        trigger: "change"
                    }
                ],
                semester_end: [
                    {
                        required: true,
                        message: "请选择结束日期",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    created() {
        this.getStuSemester();
    },
    methods: {
        async getStuSemester() {
            var query = {
                limit: this.pageSize,
                page: this.currentPage,
                usr_id: this.$store.getters.userInfo.id
            };
            var list = await toGetStuSemester(query);
            if (list.code == 200) {
                this.listData = list.data.list;
                this.total = list.data.total;
            }
            console.log("拉取年度：", list);
        },
        add(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    this.form.semester_start = getFormatTime(
                        new Date(this.form.semester_start).getTime(),
                        false
                    );
                    this.form.semester_end = getFormatTime(
                        new Date(this.form.semester_end).getTime(),
                        false
                    );
                    console.log(this.form);

                    var list = await toSaveStuSemester(this.form);
                    console.log("新增年度：", list);
                    if (list.code == 200) {
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "创建成功!"
                        });
                        this.dialogVisible = false;
                        this.form = {
                            semester_name: "",
                            semester_start: "",
                            semester_end: "",
                            usr_id: this.$store.getters.userInfo.id
                        };
                        this.getStuSemester();
                    } else {
                        this.$message.error(list.message);
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getStuSemester();
        },
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.getStuSemester();
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;

    .row {
        float: right;
    }

    .itemList {
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .item {
            width: 31%;
            border: solid 1px #e9e9e9;
            border-radius: 4px;
            height: 100px;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            box-sizing: border-box;
            margin-right: 2%;
            margin-bottom: 15px;

            .Icon {
                width: 60px;
                height: 60px;
                background: #00d5a2;
                border-radius: 50%;
                text-align: center;
                line-height: 60px;
                font-size: 38px;
                color: #ffffff;
            }

            .itemInfo {
                margin-left: 10px;
                line-height: 25px;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }

                .date {
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }

    .zhou {
        margin-left: 20px;
    }

    //省略文本
    .ShengLue {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #6d7785;
    }

    .bottomPagination {
        padding: 15px 0;
    }

    .noMore {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #6d7785;
        margin: 100px 0;
    }
}
</style>
